<template>
	<div class="chatinput">
		<div class="showchatbox" v-on:click.self="hideChatbox">
			<div class="chatmsg"> 
				<input id="inputchat" type="text" placeholder="请输入消息..." v-model.trim="chatmsg" v-focus="foc">
				<button id="sendmsg" @click="sendChatmsg">发送</button>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	let msgsocket;
	export default{
		name:"chatInput",
		data(){
			return {
				chatmsg:"",
				hide:true,
				firstLogin:false,
				othermsg:"",
				onlineUser:{},//在线用户
				goroom:"",
				foc:false,
			}
		},
		props:['focus'],
		mounted(){
			this._initConnect();
		},
		watch:{
			othermsg(){
				this.$emit("listentChatmsg",this.othermsg);
			},
			goroom(){
				this.$emit("listentChatmsg",{content:this.goroom,type:3});//type=3是进入房间消息;
			},
			onlineUser(){
				this.$emit("listentOnline",this.onlineUser);
			},
			focus(){
				this.foc = this.focus;
			}
		},
		methods:{
			sendChatmsg(){
				if(this.chatmsg.length > 0){
					this._chatMessage(this.chatmsg);
				}else{
					this.$emit("listenprompt",'发送消息不能为空');
				}
			},
			hideChatbox(){
				this.hide = false;
				this.$emit("listentChatinput",this.hide)
			},
			_initConnect(){
		        console.log('正在建立连接...');
		        try{
		            msgsocket  =  new WebSocket('wss://chat.mxzhuawawa.com:7273');
		        }catch(e){
		            console.log('连接异常 ： '+e);
		            return;
		        }
		        this._wbSocket = msgsocket;
		        msgsocket.onopen =(event) =>{
		            if(!this.firstLogin){
		                if(this.$store.state.isLogin) {
		                    var data={};
		                    data._method_= "login";
		                    data.user_id = this.$store.state.userInfo.uid;
		                    data.user_name = this.$store.state.userInfo.nickname;
		                    data.room_id  = this.$route.query.roomid;
		                    data.avatar = this.$store.state.userInfo.avatar;
		                    data.token =this.$store.state.userInfo.token;
		                    this._sendMsg(JSON.stringify(data));
		                    this.firstLogin = true;
		                } else {
		                    var data={};
		                    data._method_ = "login";
		                    data.room_id  = this.$route.query.roomid;
		                    this._sendMsg(JSON.stringify(data));
		                    this.firstLogin = true;
		                }
		            }

		            msgsocket.onmessage = this._msgReceive;

		            msgsocket.onclose = (event) => {
		                console.log('连接关闭.',event);
		                this.firstLogin = false;
		            };

		        };
		    },
		    _chatMessage(msg){
		        var data = {};
		        data._method_ = "SendPubMsg";
		        data.content   = msg;
		        data.client_name = this.$store.state.userInfo.nickname;
		        this._sendMsg(JSON.stringify(data));
		    },
		    _sendMsg(msgBuf){
		        if(msgBuf!=null&&msgBuf!='undefined'){
		            this._wbSocket.send(msgBuf);
		        }else{
		            console.log('发送消息为空!');
		        }
		    },
		    _msgReceive(event) {
		        var data = JSON.parse(event.data);
		        console.log(data);
		        if(this.hasOwnProperty('_'+data.type)){
		            eval('this._'+data.type+ '(data)');
		        }
		    },
		    _ping(data){
		    	var msg = {};
		        msg._method_ = "pong";
		        this._sendMsg(JSON.stringify(msg));
		    },
		    _login(msg){
		    	this.goroom = msg.client_name + "进入房间";
		    },
		    _sysmsg(msg){
		    	this.othermsg = {content:msg.content};
		    },
		    _SendPubMsg(msg){
		    	if(msg.from_user_id == this.$store.state.userInfo.uid){
		    		this.$emit("listentChatmsg",{nickname:msg.from_client_name,content:msg.content,type:1});//type=1是自己发的消息
					this.chatmsg =""
		    	}else{
		    		this.othermsg = {nickname:msg.from_client_name,content:msg.content,type:2};//type=2是其他人发的消息;
		    	}
		    	
		    },
		    _onLineClient(msg){
		    	this.onlineUser = msg;
		    }
		}
	}
</script>
<style lang="less" scoped>
	.showchatbox {
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 11;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.2);
	    cursor: pointer;
	}

	.chatmsg {
	    width: 100%;
	    padding: 10px;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    background: #fff;
	}

	#inputchat {
		width: -webkit-calc(100% - 70px);
	    width: calc(100% - 70px);
	    background: #eee;
	    height: 35px;
	    line-height: 35px;
	    border-radius: 5px;
	    padding: 0 10px;
	}
	#sendmsg {
	    width: 60px;
	    height: 35px;
	    background: #f4432f;
	    color: #fff;
	    display: inline-block;
	    margin-left: 5px;
	}
</style>